<style scoped>
.wraper {
    padding: 0 30px;
}
.search {
    padding-bottom:20px;
}
.search span {
    color:#666;
    font-weight: normal;
    padding-right:10px;
}
.search i{
    display: inline-block;
    font-style: normal;
    font-size: 18px;
    color:#ed3f14;
    margin-right: 20px;
}
.search button {
    /* background-color: #00a8f7; */
    color:#fff;
    margin-left:8px;
}
.top {
    clear: both;
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}

.detail {
    border-top: 1px dashed #cccccc;
}

.wraper .headline {
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}

/* 顶部 start */

.wraper .top_card {
    height: 138px;
    text-align: center;
    max-width: 25%;
    padding-left: 7px;
}

.wraper .top_card:first-child {
    padding-left: 0;
}

.wraper .top_card>div {
    background-color: #f8f8f8;
    height: 100%;
}

.wraper .top_card .card_bar {
    width: 100%;
    height: 3px;
}

.wraper .top_card .item {
    font-size: 16px;
    color: #6a747f;
    padding-top: 20px;
    line-height: 40px;
}

.wraper .top_card .result {
    font-size: 30px;
}

/* 顶部 end */

/* 分页 start */

.page {
    margin: 20px 0;
}
.ivu-page {
    padding-bottom: 150px;
} 
.to-pay-roll{
    display: inline-block;
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}
a.to-pay-roll:hover{
    background-color: #00a8f7;
    color: #fff;
}
a.to-pay-roll.disabled:hover{
    color: #bbbec4;
    background-color: #f7f7f7;
}

/* 分页 end */

.avator{
    vertical-align: middle;
}

.fr{
    float: right;
}
.balance{
    overflow: hidden;
    clear: both;
}
.balance-txt{
    display: inline-block;
    margin-right: 20px;
    vertical-align: middle;
}
.mr10{
    margin-right: 10px;
}
.mb10{
    margin-bottom: 10px;
}
.mb20{
    margin-bottom: 20px;
}
.money-tip{
    font-size: 12px;
    color:#666;
}
.money-tip span{
    color:#ed3f14;
}
.tx{
    height: 30px;
    overflow: hidden;
}

</style>
<style>
.change{
    color: #ff9900;
}
.success{
    color: #19be6b;
}
.back{
    color: #ed3f14;
}
.cancel{
    color: #80848f;
}
</style>


<template>
    <div class="team-performance">
        <product-title></product-title>
        <div class="wraper">
            <!-- <div class="search">
                <img :src="avator" width="45" height="45" class="avator" />
                <span>当前余额:</span>
                <i>12345678元</i>
                <Button type="primary">申请提现</Button>
                <Button type="info">提现记录</Button>
            </div> -->
            <div class="balance fr mb10">
                <div class="balance-txt">
                    <CountTo :endVal="balance" :mainStyle="mainStyle" :countStyle="countStyle" :decimals="2">
                        <span slot="leftText">当前余额&nbsp;</span>
                        <span slot="rightText">&nbsp;元</span>
                    </CountTo>
                </div>                
                <Button type="success" @click="openModal()">申请提现</Button>
                <Button type="info" @click="openRecordModal()">提现记录</Button>
            </div>
            <div class="top">
                <div class="headline clearfix">
                    <p>
                        <i class="icon iconfont icon-tingliushijianfenxi fl mr10"></i>  本月工资明细
                    </p>
                </div>
                <div class="clearfix">
                    <div class="top_card fl" :style="'width:'+(100/getitems)+'%'" v-for="(item,index) in teamstatus" :key="item.name">
                        <div>
                            <div class="card_bar" :style="'background-color:'+colors[index]"></div>
                            <p class="item">{{item.name}}</p>
                            <p class="result" :style="'color:'+colors[index]">{{item.value}}</p>
                        </div>
                    </div>                    
                </div>
            </div>
            <div class="detail">
                <div class="headline">
                    <p><i class="icon iconfont icon-tingliushijianfenxi fl mr10"></i>  历史工资明细</p>
                    <!-- <p>
                        <span class="red-font">提示</span>：1、本结果以承保日期为准；2、往月FYC如存在负数，则为退保冲账条目；4、如下列FYC明细合计与实发存在差异，以实发为准。
                    </p> -->
                </div>
                <div class="clearfix">
                    <Table border :columns="columns_detail" :data="data_detail"></Table>
                    <Row class="page fr">
                        <Col span="24">
                        <Page :total="detailTotal" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                        </Col>
                    </Row>
                </div>

            </div>
        </div>
        <!-- 提现申请modal -->
        <Modal v-model="showmodal" :loading="loading" title="提现申请" :mask-closable=false  @on-ok="modalok()" @on-cancel="cancel()">
            <Row>
                <Col span="20" offset="1">
                    <Form :model="application" ref="application" :rules="ruleValidate" :label-width="100">
                        <Form-item label="提现金额：" prop="amount">
                           <Input v-model="application.amount" number placeholder="请输入提现金额" style="width: 300px">
                            <Button slot="append">元</Button>
                           </Input>
                           <p class="money-tip">犹豫期内提成<span>{{cooling_salary}}</span>元，可提现余额<span>{{balance_usable}}</span>元</p>
                        </Form-item>
                    </Form>
                </Col>
            </Row>
        </Modal>
        <!-- 提现记录modal -->
        <Modal v-model="showrecord" width="1000" :loading="loading" title="提现记录" :mask-closable=false  @on-ok="modalok()" @on-cancel="cancel()">

            <Table border :columns="columns_record" :data="data_record"></Table>
            <div class="page tx">

                <!-- <Page :total="recordTotal" show-total show-sizer @on-change="recordpageChange" @on-page-size-change="recordpageSizeChange"></Page> -->
                <Page :total="recordTotal" size="small" show-total @on-change="recordpageChange"></Page>

            </div>
            <div slot="footer"></div>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Modal>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import CountTo from '../../components/CountTo.vue'
import { getPerformance , getPerformanceyear } from '../../api/achievement'
import { getPersonalSalary} from '../../api/settlement'
import { createWithdraw , getList , revocationWithdraw } from '../../api/withdraw'
export default {
    data() {
        return {
            spinShow: true,
            showmodal:false,
            showrecord:false,
            loading:true,
            application:{
                amount:''
            },
            endVal: 0,
            balance:0,
            balance_usable:0,
            cooling_salary:0,
            mainStyle: {
                fontSize: '16px',
                color:'#f18312'
            },
            countStyle: {
                fontSize: '30px',
                color: '#ed3f14'
            },
            colors:[
                "#ff8462","#00a8f7","#adeda2","#f5bb07","#4074e1","#6aefe5","#ff8462","#00a8f7","#adeda2","#f5bb07","#4074e1","#6aefe5",
            ],
            teamstatus:[],
            haslink:false,
            payrolllink:'javascript:;',
            searchForm:{
                date:''
            },
            p:1,
            pagesize:10,
            p_record:1,
            pagesize_record:10,
            premium_year:0,
            num_year:0,
            fyc_year:0,
            premium_month:0,
            num_month:0,
            fyc_month:0,
            detailTotal: 0,
            recordTotal:0,
            columns_detail: [
                {
                    title: '月份',
                    key: 'date',
                    align: 'center',
                },
                {
                    title: '首佣（元）',
                    key: 'fyc',
                    align: 'center',
                },
                {
                    title: '续佣（元）',
                    key: 'continued_commission',
                    align: 'center',
                },
                {
                    title: '推荐奖（元）',
                    key: 'recommend_bonus',
                    align: 'center',
                },
                {
                    title: '责任津贴（元）',
                    key: 'duty_bonus',
                    align: 'center',
                },
                {
                    title: '发展津贴（元）',
                    key: 'dev_bonus',
                    align: 'center',
                },
                {
                    title: '经营津贴（元）',
                    key: 'manage_bonus',
                    align: 'center',
                },
                {
                    title: '贡献津贴（元）',
                    key: 'contribute_bonus',
                    align: 'center',
                },
                {
                    title: '育成津贴（元）',
                    key: 'breed_bonus',
                    align: 'center',
                },
                {
                    title: '总计（元）',
                    key: 'sum',
                    align: 'center',
                }
            ],
            data_detail: [
               
            ],
            columns_record:[
                {
                    title: '编号',
                    key: 'id',
                    width:60,
                    align: 'center',
                },
                {
                    title: '申请金额',
                    key: 'amount',
                    align: 'center',
                },
                {
                    title: '申请时间',
                    key: 'apply_time',
                    align: 'center',
                },
                {
                    title: '转账时间',
                    key: 'transfer_time',
                    align: 'center',
                },
                {
                    title: '完成时间',
                    key: 'complete_time',
                    align: 'center',
                },
                {
                    title: '备注',
                    key: 'msg',
                    align: 'center',
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    render: (h, params) => {
                        switch(parseInt(params.row.status)){
                            case 1:
                                return h('div', [                                
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {                                               
                                                this.revocation(params.row.id)
                                            }
                                        }
                                    }, '撤销')
                                ]);
                                break;
                            case 2:
                                return  h('div', {
                                            attrs:{
                                                class:'change'
                                            }
                                        },'转账中')  
                                break;
                            case 3:
                                return h('div', {
                                            attrs:{
                                                class:'success'
                                            }
                                        },'已完成')                                                                  
                                break;
                            case 4:
                                return h('div', {
                                            attrs:{
                                                class:'back'
                                            }
                                        },'驳回')  
                                break;
                            case 5:
                                return h('div', {
                                            attrs:{
                                                class:'cancel'
                                            }
                                        },'已撤销')
                                break;
                        }                        
                    }
                }
            ],
            data_record:[

            ],
            ruleValidate:{
                amount: [
                    { required: true, type:'number', message: '提现金额不能为空', trigger: 'blur' }
                ],
            }
        }
    },
    computed: {
        getitems(){
            return this.teamstatus.length
        },  
        avator(){
            return this.$store.state.user.avator ? this.$store.state.user.avator : "http://i.kuaibao365.com/tpl/20170829/150397337160390.png";
        }
    },
    components: {
        productTitle,
        CountTo
    },
    created() {

    },
    mounted () {
        this.getSalary()        
    },
    methods: {
        //获取页面信息
        getSalary(){
            let params = {
                p:this.p,
                pagesize:this.pagesize
            }            
            new Promise((resolve, reject) => {
                getPersonalSalary(params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        this.data_detail = response.data.data.history_salary
                        this.balance = response.data.data.balance
                        this.teamstatus = response.data.data.salary
                        this.detailTotal = response.data.data.history_salary_count
                        this.balance_usable = response.data.data.balance_usable
                        this.cooling_salary = response.data.data.cooling_salary
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        //getList获取提现记录
        getlist(){
            let params = {
                p:this.p_record,
                pagesize:this.pagesize_record
            }            
            new Promise((resolve, reject) => {
                getList(params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        this.spinShow = false
                        this.data_record = response.data.data.list
                        this.recordTotal = response.data.data.total
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // 页码改变
        pageChange(page) {
            this.p = page
            this.getSalary()
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.getSalary();
        },
        recordpageChange(page){
            this.p_record = page
            this.getlist()
        },
        recordpageSizeChange(){

        },
        modalok(){
            this.$refs['application'].validate((valid) => {
                if (valid) {
                    if(this.application.amount > 0){
                        new Promise((resolve, reject) => {
                            createWithdraw(this.application).then(response => {
                                console.log(response.data)
                                if (response.data.err == 0) {
                                    this.$Message.success(response.data.info);
                                    this.getSalary()
                                    this.getlist() 
                                    this.showmodal = false                                   
                                    setTimeout(() => {
                                        this.loading = false;
                                        this.$nextTick(() => {
                                            this.loading = true;
                                        });
                                    }, 2000);
                                    
                                } else {
                                    this.$Message.error(response.data.info);
                                    setTimeout(() => {
                                        this.loading = false;
                                        this.$nextTick(() => {
                                            this.loading = true;
                                        });
                                    }, 2000);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                                setTimeout(() => {
                                    this.loading = false;
                                    this.$nextTick(() => {
                                        this.loading = true;
                                    });
                                }, 2000);
                            });
                        });
                    }else{
                        this.$Message.error('提现金额输入不正确');
                        setTimeout(() => {
                        this.loading = false;
                        this.$nextTick(() => {
                            this.loading = true;
                        });
                    }, 2000);
                    }                    
                }else{
                    setTimeout(() => {
                        this.loading = false;
                        this.$nextTick(() => {
                            this.loading = true;
                        });
                    }, 2000);
                }
            });           
        },
        cancel(){
            this.showmodal = false
            this.$refs['application'].resetFields();
        },
        openModal(){
            this.showmodal = true
        },
        openRecordModal(){
            this.showrecord = true
            this.getlist()
        },
        //申请撤销提现
        revocation(id){
            this.$Modal.confirm({
                title: '撤销提现',
                content: '<p>确定撤销该笔提现？</p>',
                onOk: () => {
                    let params = {
                        id:id
                    }                    
                    new Promise((resolve, reject) => {
                        revocationWithdraw(params).then(response => {
                            console.log(response.data)
                            if (response.data.err == 0) {
                                this.getlist()
                            } else {
                                this.$Message.error(response.data.info);
                            }
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                   });
                },
                onCancel: () => {
                    
                }
            });
        }
    }
}
</script>
